<template>
  <v-navigation-drawer
    :value="value"
    fixed
    clipped
    app
  >
    <!-- <v-toolbar flat>
      <v-list>
        <v-list-tile>
          <v-list-tile-title class="title">Dashboard</v-list-tile-title>
        </v-list-tile>
      </v-list>
    </v-toolbar>

    <v-divider></v-divider>-->

    <v-list
      dense
      class="pt-0"
    >
      <v-list-tile
        :key="`Home`"
        :to="`/`"
      >
        <v-list-tile-action>
          <v-icon>dashboard</v-icon>
        </v-list-tile-action>
        <v-list-tile-title>Home</v-list-tile-title>
      </v-list-tile>

      <v-list-group
        prepend-icon="folder"
        value="true"
      >
        <template v-slot:activator>
          <v-list-tile>
            <v-list-tile-title>ES6</v-list-tile-title>
          </v-list-tile>
        </template>
        <v-list-tile
          v-for="(work,i) in work_es6"
          :key="i"
          :to="work.link"
        >
          <v-list-tile-title v-text="work.title" />
        </v-list-tile>
      </v-list-group>

      <v-list-group
        prepend-icon="folder"
        value="true"
      >
        <template v-slot:activator>
          <v-list-tile>
            <v-list-tile-title>Vue</v-list-tile-title>
          </v-list-tile>
        </template>
        <v-list-tile
          v-for="(work,i) in work_vue"
          :key="i"
          :to="work.link"
        >
          <v-list-tile-title v-text="work.title" />
        </v-list-tile>
      </v-list-group>
    </v-list>
  </v-navigation-drawer>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: true
    }
  },
  data: () => ({
    work_es6: [
      { title: "let&const", link: "/es6/1" },
      { title: "解构赋值", link: "/es6/2" },
      { title: "箭头函数", link: "/es6/3" },
      { title: "扩展运算符", link: "/es6/4" },
      { title: "循环&遍历数组", link: "/es6/5" },
      { title: "对象的扩展", link: "/es6/6" },
      { title: "类的扩展", link: "/es6/7" },
      { title: "Symbol", link: "/es6/8" },
      { title: "Set 数据结构", link: "/es6/9" },
      { title: "Promise-成功", link: "/es6/10" },
      { title: "Promise-失败", link: "/es6/11" },
      { title: "Promise-进阶", link: "/es6/12" },
      { title: "Promise.then.catch", link: "/es6/13" },
      { title: "Generator", link: "/es6/14" },
      { title: "斐波那契数列", link: "/es6/15" },
      { title: "async", link: "/es6/16" }
    ],
    work_vue: [
      { title: "Vue基础语法1", link: "/vue/1" },
      { title: "Vue基础语法2", link: "/vue/2" },
      { title: "Vue基础语法3", link: "/vue/3" },
      { title: "作业-歌曲榜单", link: "/vue/songrank" },
      { title: "TodoList", link: "/vue/todolist" },
      { title: "仿微博基础", link: "/vue/weibo" },
      { title: "Animation", link: "/vue/animation" },
      { title: "跨域:Proxy+fetch/axios", link: "/vue/proxy" }
    ]
  })
};
</script>
